<template>
	<view class="container">
		<view class="top">
			<image class="login-img" src="@/static/hospital.png"></image>
		</view>
		<view class="login-from">
			<form @submit="formSubmit">
			  <view class="uni-form-item uni-column">
				  <!--账号-->
				   <view class="inputView"> 
				    <image class="nameImage" src="@/static/name.png"></image> 
				    <label class="loginLab">手机号</label> 
				    <input class="inputText" name="phone" placeholder="请输入手机号" bindinput="usernameInput" /> 
				   </view>
			
			      <!-- <input class="inputText" name="username" placeholder="请输入账号" /> -->
			  </view>
			  <view class="line"></view>
				<view class="uni-form-item uni-column">
					 <!--密码-->
					 <view class="inputView"> 
					  <image class="keyImage" src="@/static/key.png"></image> 
					  <label class="loginLab">密码</label> 
					  <input class="inputText" password="true" name="password" placeholder="请输入密码" bindinput="passwordInput" /> 
					 </view> 
					
				    <!-- <input class="uni-input" name="password" placeholder="请输入密码" /> -->
				</view>
			  <view class="uni-btn-v">
			      <button form-type="submit">登录</button>
				  <view class="register">
					<text class="registerContent" @click="handleRegister('1')">用户注册</text>
					<text class="registerContent" @click="handleRegister('2')">医生注册</text>  
				  </view>
			      
			  </view>
			</form>
		</view>
	</view>
</template>

<script>
	import { login } from '@/api/index.js'
	export default{
		data() {
			return {
			}
		},
		onReady() {
			const that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.num = res.windowHeight;
				}
			});
		},
		onLoad() {},
		methods:{
			formSubmit(val) {
				let param = {...val.detail.value}
				if(!param.phone) {
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
				} else if (!param.password) {
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
				} else {
					login(param).then(res => {
						console.log(res, 99)
						if(res.code !== 200) {
							uni.showToast({
								title:res.message,
								icon:'none'
							})
							return
						}
						uni.setStorageSync( 'user',res.data.item)
						uni.switchTab({
							url: '/pages/index/index'
						})
					})
				}
			},
			handleRegister(val) {
				uni.navigateTo({
					url: '/pages/register/index?pageName='+ val
				})
			}
		}
	}
</script>

<style>
	.container {
		height: 100%; 
		 display: flex; 
		 flex-direction: column; 
		 padding: 0; 
		 box-sizing: border-box; 
		/* background: linear-gradient(top, #4a8d9c, #705271); */
	}
	.top {
		padding-top: 40rpx;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.login-img{ 
		
	 height: 150rpx;
	 width: 150rpx;
	}
	/* .content {
		height: 30%;
	} */
/* 	image {
		width: 400rpx;
		height: 400rpx;
		margin-left: 20%;
	} */
	.bottom {
		height: 30%;
	}
	.content_pw {
		margin-top: 50rpx;
	}
	/*表单内容*/
	.login-from { 
	  
	 flex: auto; 
	 height:100%; 
	 padding: 60rpx;
	}
/* 	input {
		width: 80%;
		margin-left: 100rpx;
	} */
	.inputView { 
	 /* background-color: #fff;  */
	 line-height: 45px; 
	 border-radius:20px;
	 border:1px solid #999999;
	} 
	 
	/*输入框*/
	.nameImage, .keyImage { 
	 margin-left: 20px; 
	 width: 18px; 
	 height: 16px
	} 
	 
	.loginLab { 
	 margin: 15px 15px 15px 10px; 
	 color: #545454; 
	 font-size: 14px
	} 
	 
	.inputText { 
	 flex: block; 
	 float: right; 
	 text-align: right; 
	 margin-right: 22px; 
	 margin-top: 11px;
	 color: #cccccc; 
	 font-size: 14px
	} 
	.line { 
	 margin-top: 8px; 
	}
	button {
	  width: 100%;
	  margin-top: 100rpx;
	  background-color: rgba(74,141,156,0.9);
	  color: white;
	  border-radius: 98rpx;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: center;
	}

	
	button::after {
	  border-radius: 98rpx;
	  border: 0; 
	}
	.uni-btn-v{
		margin-top: 50rpx;
	}
	
	.register {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;	
		align-items: center;
		justify-content: space-between;
	}
	
	.registerContent {
		text-decoration-line: underline;
		color: rgba(74,141,156,0.9);
	}
</style>
